<template>
	<view class="container" :class="container">

		<view style="height: 5vw"></view>
		<view class="margin">
			<swiper v-if="longWidth" style="overflow: visible;" :current="swiperItemIndex" class="swiper"
				previous-margin="50rpx" next-margin="50px" active-class="active-swiper" @change="changeSwiperItem">
				<swiper-item class="swipe-item">
					<view class="swiper-item uni-bg-red banner-item">
						<view :class="vipbg">
							<view>
								<image v-show="showVipLabel" class="vipline1" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo1" :src="vipLogo"></image>
							</view>


							<view class=" padding vipContent1 wpier_padding" :class="textColor">



								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>


								<view style="height: 40rpx;"></view>



								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->



							</view>


							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green banner-item">
						<view :class="vipbg">
							<view>
								<image v-show="showVipLabel" class="vipline1" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo1" :src="vipLogo"></image>
							</view>

							<view class=" padding vipContent1 wpier_padding" :class="textColor">

								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>

								<view style="height: 40rpx;"></view>


								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->

							</view>
							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue banner-item">
						<view :class="vipbg">
							<view>
								<image v-show="showVipLabel" class="vipline1" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo1" :src="vipLogo"></image>
							</view>

							<view class=" padding vipContent1 wpier_padding" :class="textColor">

								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>

								<view style="height: 40rpx;"></view>


								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->

							</view>
							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<swiper v-else style="overflow: visible;" :current="swiperItemIndex" class="swiper" previous-margin="50rpx"
				next-margin="15px" active-class="active-swiper" @change="changeSwiperItem">
				<swiper-item class="swipe-item">
					<view class="swiper-item uni-bg-red banner-item ">
						<view :class="vipbg">

							<view>
								<image v-show="showVipLabel" class="vipline" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo" :src="vipLogo"></image>
							</view>




							<view class=" padding vipContent wpier_padding" :class="textColor">

								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>

								<view class="bigEmpty"></view>


								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->

							</view>
							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item ">
					<view class="swiper-item uni-bg-green banner-item">
						<view :class="vipbg">
							<view>
								<image v-show="showVipLabel" class="vipline" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo" :src="vipLogo"></image>
							</view>

							<view class=" padding vipContent wpier_padding" :class="textColor">

								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>

								<view class="bigEmpty"></view>


								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->

							</view>
							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="swiper-item uni-bg-blue banner-item">
						<view :class="vipbg">
							<view>
								<image v-show="showVipLabel" class="vipline" :src="vipLine"></image>
								<image v-show="showVipLabel" class="viplogo" :src="vipLogo"></image>
							</view>

							<view class=" padding vipContent wpier_padding" :class="textColor">

								<view class="line">
									<view :class="vipLable" class="text14 vipLabel">
										LV&nbsp;{{ level }}
									</view>
									<view class="text18">{{ vipName }}</view>
									<view class="bigEmpty"></view>
								</view>

								<view class="bigEmpty"></view>


								<view class="marginTop text14 ">
									<span>有效期至:</span>
									<span>{{ vipTime }}</span>
								</view>

							<!-- 	<view class="marginTop text14">

									<span>{{ vipNum }}</span>
								</view> -->

							</view>
							<view v-show="false" class="line">
								<view class="bigEmpty"></view>
								<view class="haveBg padding textwhite14">当前拥有</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>



		</view>

		<view class="marginLeft line " style="margin-top: 40rpx; margin-bottom: 40rpx; ">
			<view class="column">
				<view :class="circleBg " class="padding ">
					<image class="sizeImage" src="../../static/timedo.png"></image>
				</view>
				<view>
					作画次数
				</view>
				<view>
					不限
				</view>
			</view>

			<view class="column marginLeft" v-show="fastTime">
				<view :class="circleBg " class="padding ">
					<image class="sizeImage" src="../../static/shandian2.png"></image>
				</view>
				<view>
					加速卡次数
				</view>
				<view>
					{{fastTime}}次/月
				</view>
			</view>
			<view class="column marginLeft" v-show="fastTime">
				<view :class="circleBg " class="padding ">
					<image class="sizeImage" src="../../static/yifu.png"></image>
				</view>
				<view>
					一键同款
				</view>
				<view>
					&nbsp;
				</view>
			</view>
			<view class="column marginLeft" v-show="fastTime">
				<view :class="circleBg " class="padding ">
					<image class="sizeImage" src="../../static/qunliao.png"></image>
				</view>
				<view>
					专属服务群
				</view>
				<view>
					&nbsp;
				</view>
			</view>

			<view class="bigEmpty"></view>

		</view>

		<view class="textBg padding textwhite16 margin ">
			<view class="title-box">
				<img src="../../static/zuoye.png" alt="" style="width: 50rpx;height: 50rpx;margin-top: 15rpx;">
				<view class="padding">{{vipName}}规则</view>
			</view>
			<view class="lineGray"></view>

			<view class="padding rules" v-show="level==0">
				<div>1.用户注册即送AI体验卡，每日0点赠送3次免费</div>
				<div>2.赠送次数可用于所有模型</div>
				<div>3.用户可通过邀请好友注册，获得积分奖励的方式赠加创作次数。奖励积分可以我的积分页面中查看。
					注：设辑官方随时有权对AI体验卡规则作出调整，并对规则拥有最终解释权</div>
			</view>
			<view class="padding rules" v-show="level==1">
				<div>1.充值450次作画次数，次月当日次数未使用完过期，有效期1个月</div>
				<div>2.充值次数可用于所有模型</div>
				<div>3.益卡可叠加购买，购买后将立即生效</div>
			</view>
			<view class="padding rules" v-show="level==2">
				<div>1.不限AI生成次数，有效期6个月</div>
				<div>2.拥有一键同款功能</div>
				<div>3.充值次数可用于所有模型</div>
				<div>4.赠送300次/月生成加速，按照每消耗3积分算一次的规则赠送，有效期内有效</div>
				<div>5.为您提供专属服务群，24小时随时为您服务</div>
				<div>6.益卡可叠加购买，购买后将立即生效</div>
			</view>
			<view class="padding rules" v-show="level==3">
				<div>1.不限AI生成次数，有效期12个月</div>
				<div>2.拥有一键同款功能</div>
				<div>3.充值次数可用于所有模型</div>
				<div>4.赠送500次/月生成加速，按照每消耗3积分算一次的规则赠送，有效期内有效</div>
				<div>5.为您提供专属服务群，24小时随时为您服务</div>
				<div>6.益卡可叠加购买，购买后将立即生效</div>
				
			</view>
			<view class="padding rules" v-show="level==4">
				<div>1.不限AI生成次数，有效期24个月</div>
				<div>2.拥有一键同款功能</div>
				<div>3.充值次数可用于所有模型</div>
				<div>4.赠送600次/月生成加速，按照每消耗3积分算一次的规则赠送，有效期内有效</div>
				<div>5.为您提供专属服务群，24小时随时为您服务</div>
				<div>6.益卡可叠加购买，购买后将立即生效</div>
				 
				
			</view>
		</view>

		<view style="height: 150rpx;"></view>

		<view  class="foot line padding index100 ">
			<view class="textwhite18 marginLeft">合计</view>
			<view class="textPrice marginLeft">￥{{money}}</view>
			<!-- <view class="textgray14 marginLeft textMidLine">￥{{money*2}}</view> -->
			<view class="bigEmpty"></view>
			<view class="ok line textwhite18 marginLeft marginRight" @click="click1()">开通</view>
		</view>


		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup dialog padding">
				<view class="centerGroup marginTop">
					请用微信扫描支付
				</view>
				<view class="centerGroup marginTop">
					<canvas canvas-id="qrcode" v-show="showDialog" style="width: 150px;margin: 0 auto;" />
				</view>
				<view class="centerGroup marginTop">
					<view class="centerGroup canle textblack14" @click="canleDialog">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	import request from '/common/request.js';
	export default {


		data() {
			return {
				container: "container",
				level: 3,
				vipName: "暂无会员",
				vipTime: "永久 ",
				vipNum: "每天赠送3次免费作画次数",
				vipbg: "vipbg0",
				vipLable: "vipLable1",
				showVipLabel: false,
				textColor: "textWhite",
				vipLine: "/static/vipline1.png",
				vipLogo: "/static/viplogo1.png",
				circleBg: "cicleBg1",
				vipPermission: "",
				showDialog: false,
				money: 0,
				haveTimeNum: 0,
				have: false,
				fastTime: 0,
				swiperItemIndex: 0,
				longWidth: false,
				itemClassIndex: 0
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},


		onReady: function() {

		},
		onLoad: function(query) {



			this.level = query.id
			this.swiperItemIndex = query.id - 2
			this.info(this.level);
			this.changeTabBgColor(this.level)
			const url = getApp().globalData.apiUrl + "/api/v1/user/mine";
			const that = this;
			request(url, "GET", {}, uni.getStorageSync("token"))
				.then(function(res) {
					console.log('返回正确回调', res)
					if (res.code == 0) {

						switch (that.level) {
							case "1":
								if (res.data.vip1)
									that.have = true;
								else
									that.have = false;
								break;
							case "2":
								if (res.data.vip1)
									that.have = true;
								else
									that.have = false;
								break;
							case "3":
								if (res.data.vip1)
									that.have = true;
								else
									that.have = false;
								break;
							case "4":
								if (res.data.vip1)
									that.have = true;
								else
									that.have = false;
								break;
							default:

								that.have = true;
								break
						}
					} else {

					}
				}, function(err) {
					console.log('返回错误回调', err)
				})
			uni.getSystemInfo({
				success: function(res) {
					var windowHeight = "height:" + res.windowHeight + "px";
					var windowWidth = "height:" + res.windowWidth + "px";
					console.log(windowHeight);
					console.log(windowWidth);
					if (res.windowWidth > res.windowHeight) {
						that.longWidth = true;
					}
				}
			});

		},
		methods: {
			changeTabBgColor(level) {
				let infoLevel = "" + level
				switch (infoLevel) {
					case "1":
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#DDBFAC"
						})
						this.vipTime = "1个月"
						break;
					case "2":

						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#C1CBD5"
						})
						this.vipTime = "6个月"
						break;
					case "3":
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#F0D8A1"
						})
						this.vipTime = "12个月"
						break;
					case "4":
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#E2D7F5"
						})
						this.vipTime = "24个月"
						break;

					default:
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#636363"
						})
						this.vipTime = "12个月"
						break;
				}
			},
			changeSwiperItem(e) {
				// console.log(e.detail.current+1)
				this.itemClassIndex = e.detail.current
				this.level = e.detail.current + 2
				this.info(this.level);
				this.changeTabBgColor(this.level)
			},

			qrFun: function(text) {
				this.showDialog = true;
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},

			canleDialog() {
				this.showDialog = false
			},
			info(level) {
				let infoLevel = "" + level
				switch (infoLevel) {
					case "1":
						this.container = "container1"
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "青铜权益卡";
						this.vipLogo = "/static/viplogo1.png";
						this.vipLine = "/static/vipline1.png";
						this.vipbg = "vipbg1"
						this.vipLable = "vipLable1"
						this.vipNum = "每月600次免费作画次数"
						this.money = 358;

						this.haveTimeNum = '450次/月';
						this.fastTime = 0;
						console.log(111)
						break;
					case "2":
						this.container = "container2"
						this.textColor = "textSilver";
						this.showVipLabel = true;
						this.vipName = "白银权益卡";
						this.vipLogo = "/static/viplogo2.png";
						this.vipLine = "/static/vipline2.png";
						this.vipbg = "vipbg2"
						this.vipLable = "vipLable2"
						this.vipNum = "每月600次免费作画次数"

						this.haveTimeNum = '600次/月';
						this.money = 10800;
						this.fastTime = 300;
						console.log(222)
						break;

					case "3":
						this.container = "container3"
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "黄金权益卡";
						this.vipLogo = "/static/viplogo3.png";
						this.vipLine = "/static/vipline3.png";
						this.vipbg = "vipbg3"
						this.vipLable = "vipLable3"
						this.money = 21600;
						this.haveTimeNum = '900次/月';
						this.vipNum = "每月900次免费作画次数"
						this.fastTime = 500;
						console.log(333)
						break;
					case "4":
						this.container = "container4"
						this.textColor = "textOrange";
						this.showVipLabel = true;
						this.vipName = "铂金权益卡";
						this.vipLogo = "/static/viplogo4.png";
						this.vipLine = "/static/vipline4.png";
						this.vipbg = "vipbg4"
						this.vipLable = "vipLable4"
						this.money = 43200;
						this.vipNum = "每月900次免费作画次数"
						this.haveTimeNum = '900次/月';
						this.fastTime = 600;
						console.log(444)
						break;
					case "0":
					default:
						this.container = "container0"
						this.textColor = "textWhite";
						this.showVipLabel = false;
						this.vipName = "设辑AI体验卡";
						this.vipbg = "vipbg0"
						this.vipNum = "单日可以用3次"
						this.haveTimeNum = '3次/次';
						this.money = 0;
						break
				}
			},
			update() {

				const url = getApp().globalData.apiUrl + "/api/v1/order/" + this.id;
				const that = this;

				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {

						console.log('返回正确回调', res)
						if (res.data.state == 1) {
							that.showDialog = false
							that.have = true;
							uni.showToast({
								title: "充值成功"
							})
						} else {
							setTimeout(function() {
								that.update();

							}, 2000);
						}

					}, function(err) {
						that.loading = false
						console.log('返回错误回调', err)
						uni.showToast({
							icon: 'err',
							title: err.message
						})
					})

			},

			login() {
				const that = this;
				uni.login({
					success: res => {
						//code值(5分钟失效)
						console.info(res.code);
						//小程序appid
						let appid = 'wx85dd784a1d6ddc9d'; //我瞎写的
						//小程序secret
						let secret = 'e0727eaaaf4a8462d7f1d183383d542e'; //我瞎写的
						const url = getApp().globalData.apiUrl + "/api/v1/user/openId?code=" + res.code;
						//wx接口路径
						uni.request({
							url: url, // 请求路径
							data: {}, // 请求体
							method: 'GET', //请求方法,
							header: '', //请求头
							success: result => {
								//响应成功
								//这里就获取到了openid了
								console.info("openId" + result.data.data);
								// uni.setStorage({
								// 	key:'openId',
								// 	data: result.data.data
								// })
								that.createOrder(result.data.data)

							},
							fail: err => {} //失败
						});
					}
				});

			},

			click1() {

				// #ifdef H5
				this.createOrder("")
				// #endif

				// #ifdef MP
				var platform = uni.getSystemInfoSync().platform;
				console.log(platform)
				if (platform == 'ios') {
					uni.showModal({
						title: "由于相关规范，IOS系统(苹果手机)该功能暂不可用!",
						confirmText: "咨询",
						showCancel: false,
						success: function() {


							uni.openCustomerServiceChat({
								corpId: "ww2fb1f9185008afa3",
								extInfo: {
									url: "https://work.weixin.qq.com/kfid/kfc2fde04b0fa7f99f6"
								},
								success: function(e) {
									console.log('e', e)
								},
								fail: function(err) {
									console.log('err', err)
								}
							})

						}
					})
				} else {
					this.login()
				}
				// #endif


			},

			createOrder(openId) {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/order";
				var money = that.money * 100;
				request(url, "POST", {
						type: 2,
						money: money,
						openId: openId
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.loading = false;
						that.id = res.data.id
						that.update()
						if (openId) {
							uni.requestPayment({
								provider: 'wxpay', //支付类型-固定值
								timeStamp: res.data.payMap.timeStamp, // 时间戳（单位：秒）
								nonceStr: res.data.payMap.nonceStr, // 随机字符串
								package: res.data.payMap.packageVal, // 固定值
								signType: res.data.payMap.signType, //固定值
								paySign: res.data.payMap.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									console.log("支付成功");
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									console.log("支付失败");
								}
							});
						} else {
							that.showDialog = true
							that.qrFun(res.data.payUrl)
						}


					}, function(err) {
						that.loading = false
						console.log('返回错误回调', err)
						uni.showToast({
							icon: 'error',
							title: err.message
						})
					})

			},
			async doSubmit() {
				const url = getApp().globalData.apiUrl + "/api/v1/order";
				var type = 1
				request(url, "POST", {
						type: type
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)

					}, function(err) {
						console.log('返回错误回调', err)

					})
			}

		}
	}
</script>

<style>
	@import "../../common/uni.css";

	.rules {
		font-size: 30rpx;
		line-height: 60rpx;
	}

	.wpier_padding {
		padding: 30rpx;
	}

	.activeItem {
		transform: scale(0.9) !important;
	}

	.marginLeft {
		margin-left: 2rem;
	}

	.swiper {
		/* padding: 0 50rpx; */
		/* height: 900rpx; */
		/* overflow: visible !important; */
	}

	.column {

		font-size: 24rpx;
		color: white;
	}

	.aaaa {
		display: block;
		border-radius: 500rpx;
		/* overflow: hidden; */
		/* box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.301961); */
	}

	.swipe-item {
		/* height: 900rpx; */
		/* overflow: hidden; */
		/* border-radius: 50rpx 50rpx 50rpx 50rpx; */
	}

	.active-swiper {
		color: white !important;
	}

	.banner-item {
		/* height: 250rpx; */
		margin-right: 20rpx;
		box-shadow: -5px -5px 19px 0px rgba(0, 0, 0, 0.301961)
			/* 设置项之间的间距 */
	}

	.haveBg {
		background: #000000;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		opacity: 0.8;
	}


	.dialog {

		width: 80%;

		background-color: #ffffff;
		border-radius: 15rpx;

	}

	.itemGroup {
		border-radius: 15px;
		background-color: #ffffff;
	}

	.dialogBg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.centerGroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}



	.title-box {
		display: flex;
	}

	.title-icon {
		color: white !important;
		margin-top: 16rpx;
	}

	.container {
		min-height: 100vh;
	}

	.sizeImage {
		width: 100%;
		height: 100%;
	}

	.cicleBg1 {
		margin-bottom: 15rpx;
		width: 45rpx;
		height: 45rpx;
		border-radius: 30px;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.13);
		background: linear-gradient(134deg, #F1E7E2 6%, #E9D2C5 45%, #E5C9BA 86%);
	}

	.container0 {
		background: #636363;
	}

	.container1 {
		background: linear-gradient(136deg, #DEBFAD 0%, #AD8063 100%);
	}

	.container2 {
		background: linear-gradient(155deg, rgb(175, 189, 201) 10%, #6C849B 40%)
	}

	.container3 {
		background: linear-gradient(155deg, rgb(239, 213, 157) 10%, #C18048 40%);
	}

	.container4 {
		background: linear-gradient(155deg, rgb(208, 192, 236) 10%, #5425A9 40%);
	}


	.vipline1 {
		opacity: 0.1;
		margin-top: 0vh;
		margin-right: -25vw;
		margin-left: 50vw;
		width: 30vh;

		height: 30vh;

		position: absolute;
	}

	.viplogo1 {
		margin-left: 35vw;
		width: 30vh;
		height: 30vh;
		z-index: 100;
		margin-top: -15vh;
		position: absolute;
	}

	.vipContent1 {


		height: 80vh;

		display: flex;
		flex-direction: column;
	}






	.vipline {
		opacity: 0.1;
		margin-top: -20vw;
		margin-right: -25vw;
		margin-left: 50vw;
		width: 50vw;

		height: 50vw;

		position: absolute;
	}

	.viplogo {
		margin-left: 35vw;
		width: 50vw;

		height: 50vw;

		margin-top: -15vw;
		position: absolute;
	}

	.vipContent {
		height: 30vw;

		display: flex;
		flex-direction: column;
	}

	.vipbg0 {
		background: radial-gradient(123% 123% at 0% 10%, #000000 0%, #D8D8D8 99%);
		box-sizing: border-box;
		border-radius: 15rpx;
	}

	.vipbg1 {
		background: radial-gradient(55% 55% at 13% 5%, #F4EEEA 0%, #E5C9B9 100%);
		box-sizing: border-box;
		border-radius: 15rpx;

	}

	.vipbg2 {
		background: radial-gradient(55% 55% at 13% 5%, #EDF0F1 0%, #C9D9DE 100%);
		box-sizing: border-box;
		border-radius: 15rpx;


	}

	.vipbg3 {
		background: radial-gradient(123% 123% at 0% 10%, #FFECC1 0%, #EAA771 99%);
		box-sizing: border-box;

		border-radius: 15rpx;
	}

	.vipbg4 {
		background: linear-gradient(107deg, #F7F4FF 5%, #D3BAFC 45%, #AB94FE 87%);
		box-sizing: border-box;
		border-radius: 15rpx;

	}

	.vipLabel {
		width: 100 rpx;
		height: 50 rpx;
		border-radius: 5 rpx;
		opacity: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.vipLable1 {
		background: linear-gradient(130deg, rgba(241, 231, 226, 0.60) -57%, rgba(229, 201, 186, 0.60) 23%, rgba(229, 201, 186, 0.60) 108%);
	}

	.vipLable2 {
		background: linear-gradient(130deg, rgba(230, 236, 238, 0.60) -57%, rgba(202, 217, 222, 0.60) 23%, rgba(201, 217, 222, 0.60) 108%);
	}

	.vipLable3 {
		background: linear-gradient(130deg, rgba(253, 229, 185, 0.60) -57%, rgba(244, 202, 153, 0.60) 23%, rgba(234, 167, 113, 0.60) 108%);
	}

	.vipLable4 {
		background: linear-gradient(130deg, rgba(247, 244, 255, 0.60) -57%, rgba(211, 186, 252, 0.60) 23%, rgba(171, 148, 254, 0.60) 108%);
	}


	.ok {
		width: 136.87px;
		height: 40.32px;
		border-radius: 100px;
		opacity: 1;
		background: #0033FF
	}

	.textMidLine {

		text-decoration: line-through;
	}

	.textPrice {

		font-size: 30px;
		font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
		font-weight: 400;
		color: #D000FF;
	}

	.foot {

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #000000;
	}




	.vipItem {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.textBg {
		border-radius: 15px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid;
		border-image: linear-gradient(56deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.00) 93%);
		backdrop-filter: blur(25px);

	}
</style>